import CustomTable from "../../../components/CustomTable";
import {
  PlusOutlined,
  UploadOutlined,
  DeleteOutlined,
  DownloadOutlined,
} from "@ant-design/icons";
import { useState } from "react";
import UserModel from "./UserModel";
// 列配置
const columns = [
  { title: "姓名", dataIndex: "name", key: "name" },
  { title: "年龄", dataIndex: "age", key: "age" },
  { title: "邮箱", dataIndex: "email", key: "email" },
];

// 数据
const data = [
  { id: 1, name: "张三", age: 28, email: "3456@qq.com" },
  { id: 2, name: "李四", age: 32, email: "3355646@qq.com" },
];

// 页面中使用
const Table2 = () => {
  const [showModel, setShowModel] = useState(false);
  const [initialData, setInitialData] = useState(null);
  const [tableData, setTableData] = useState(data);
  const handleEdit = (record) => {
    record.type = "edit"
    console.log("编辑", record);
    setInitialData(record);
    setShowModel(true);
  };

  // 方法：根据id替换数组中对应的项
  const replaceItemById = (originalArray, updatedItem) => {
    // 遍历数组，返回新数组
    return originalArray.map((item) => {
      // 找到id匹配的项，替换为新数据；不匹配的项保持不变
      return item.id === updatedItem.id ? updatedItem : item;
    });
  };
  // 处理更新操作
  const handleUpdate = (updatedItem) => {
    // 调用替换方法，得到新数组
    const newDataList = replaceItemById(tableData, updatedItem);
    // 更新状态
    setTableData(newDataList);
  };
  const handleOk = (updatedItem) => {
    let newtableData = tableData;
    if (initialData === null) {
      updatedItem.id = Date.now();
      newtableData.unshift(updatedItem);
      setTableData(newtableData);
    } else {
      updatedItem.id = initialData.id;
      handleUpdate(updatedItem);
    }

    setShowModel(false);
  };
  const handleCancel = (e) => {
    setShowModel(false);
  };
  const handleDelete = (record) => {
    // let newTableData = tableData // 这里只是创建了原数组的引用，并非副本 直接修改了原数组，违反了 React 状态不可变的原则。
    // 关键：先复制原数组，创建新的引用
    const newTableData = [...tableData];
    // 找到要删除的元素索引
    const index = newTableData.findIndex((item) => item.id === record.id);

    // 确保找到元素后再删除（避免索引为-1时出错）
    if (index !== -1) {
      newTableData.splice(index, 1); // 此时修改的是新数组，不影响原状态
      setTableData(newTableData); // 新数组引用不同，React 会触发更新
    }
  };
  const handleView =(record)=>{
    record.type = "view"
    console.log(record)
     setInitialData(record);
    setShowModel(true);
  }
  return (
    <>
      <CustomTable
        columns={columns}
        dataSource={tableData}
        showActionColumn // 显示操作列
        onEdit={handleEdit} // 传递编辑回调
        onDelete={handleDelete}
        onView={handleView}
        headerActions={[
          {
            label: "新增",
            type: "primary",
            icon: <PlusOutlined />, // 配置图标
            onClick: () => {
              console.log("新增");
            //   record.type = "view"
              setInitialData(null);
              setShowModel(true);
            },
          },
          {
            label: "上传",
            icon: <UploadOutlined />,
            onClick: () => {
              console.log("上传");
            },
          },
          {
            label: "下载",
            icon: <DownloadOutlined />,
            onClick: () => {
              console.log("下载");
            },
          },
          {
            label: "删除",
            danger: true,
            icon: <DeleteOutlined />,
            onClick: () => {
              console.log("删除");
            },
          },
        ]}
      />
      <UserModel
        showModel={showModel}
        handleOk={handleOk}
        handleCancel={handleCancel}
        initialData={initialData}
      />
      {/* {showModel&& <UserModel/>} */}
    </>
  );
};
export default Table2;
